<template>
  <div class="newslist">
    <!-- 头部 -->
    <div class="header">
      <img src="../../assets/images/news/left.jpg" alt="" @click="Jump" />
      <div class="on-line">在线客服</div>
      <div class="history">浏览历史</div>
    </div>

    <div class="wrap">
      <!-- 第一部分 -->
      <div class="wrap-one">
        <!-- 左边 -->
        <div class="wrap-one-left">
          <div class="problem">常见问题</div>
          <div class="car">能详细介绍一下购车流程吗？</div>
          <div class="car">这辆车有什么质保</div>
          <div class="car">这辆车的车况如何？</div>
          <div class="car">购车需要多少钱？</div>
          <div class="car">如何分期买车</div>
        </div>
        <!-- 右边 -->
        <div class="wrap-one-right">
          <div class="technological">
            <img src="../../assets/images/news/car.jpg" alt="" />
            <div class="CarBuying">购车流程</div>
          </div>
          <div class="recommend">
            <img src="../../assets/images/news/fabulous.jpg" alt="" />
            <div class="vehicle">车辆推荐</div>
          </div>
        </div>
      </div>

      <!-- 第二部分 -->
      <!-- 1 -->
      <div class="hello">
        <img src="../../assets/images/news/people-female.jpg" alt="" />
        <div class="hello-content">
          您好，欢迎来到优信二手车客服
          中，可以将你购车的问题发给我，我会在时代峰峻科技卡萨丁线为你解答
        </div>
      </div>
      <!-- 2 -->
      <div class="hello">
        <img src="../../assets/images/news/people-female.jpg" alt="" />
        <div class="hello-content">
          您好，欢迎来到优信二手车客服
          中，可以将你购车的问题发给我，我会在时代峰峻科技卡萨丁线为你解答
        </div>
      </div>
      <!-- 时间 -->
      <div class="hello-two-time">20:40</div>
      <!-- 3 -->
      <div class="hello-two">
        <div class="hello-content">
          我没有什么想问的，我
          <div class="left">有事在问你</div>
        </div>
        <img src="../../assets/images/news/people-my.jpg" alt="" />
      </div>
      <!-- 4 -->
      <div class="hellos">
        <img src="../../assets/images/news/people-female.jpg" alt="" />
        <div class="hello-content">好的，有什么想问的随时来</div>
      </div>
    </div>
    <!-- 占位 -->
    <div class="zhan"></div>
    <!-- 尾部 -->
    <div class="footer">
      <img src="../../assets/images/news/voice.jpg" alt="" class="footer-one" />
      <input type="text" placeholder="输入新消息" />
      <img src="../../assets/images/news/smiling.jpg" alt="" class="footer-two" />
      <img src="../../assets/images/news/more.jpg" alt="" />
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {};
  },
  methods:{
        Jump() {
      this.$router.push("/news");
    },
  }
};
</script>



<style lang="less" scoped>
.newslist {
  height: 100%;
  background-color: #f7f7f7;
  // display: flex;
  // flex-direction: column;
  .header {
    height: 98px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    img {
      height: 38px;
      width: 21px;
      margin-left: 30px;
      margin-right: 253px;
    }
    .on-line {
      font-size: 30px;
      color: black;
      margin-right: 160px;
    }
    .history {
      font-size: 26px;
      color: black;
    }
  }

  .wrap {
    width: 700px;
    margin: auto;
    .wrap-one {
      height: 410px;
      display: flex;
      justify-content: space-between;
      margin-top: 45px;
      .wrap-one-left {
        height: 410px;
        width: 494px;
        background-color: white;
        border-radius: 15px;
        .problem {
          font-size: 30px;
          font-weight: 600;
          margin-left: 42px;
          margin-top: 32px;
        }
        .car {
          font-size: 26px;
          margin-left: 42px;
          margin-top: 28px;
        }
      }
      .wrap-one-right {
        .technological {
          width: 192px;
          height: 195px;
          border-radius: 15px;
          background-color: white;
          font-size: 24px;
          margin-bottom: 17px;
          img {
            width: 95px;
            height: 95px;
            margin-top: 29px;
            margin-left: 44px;
          }
          .CarBuying {
            margin-top: 24px;
            margin-left: 39px;
          }
        }
        .recommend {
          width: 192px;
          height: 195px;
          border-radius: 15px;
          font-size: 24px;
          background-color: white;
          img {
            width: 95px;
            height: 95px;
            margin-top: 29px;
            margin-left: 44px;
          }
          .vehicle {
            margin-top: 24px;
            margin-left: 39px;
          }
        }
      }
    }
    .hello {
      display: flex;
      margin-top: 53px;
      margin-bottom: 53px;
      img {
        width: 75px;
        height: 75px;
        margin-right: 19px;
        margin-top: 3px;
      }
      .hello-content {
        width: 450px;
        font-size: 26px;
        padding: 20px;
        background-color: white;
        border-radius: 15px;
      }
    }
    .hello-two-time {
      width: 75px;
      height: 37px;
      background-color: #d9d9db;
      color: white;
      text-align: center;
      line-height: 37px;
      font-size: 18px;
      margin: auto;
    }
    .hello-two {
      display: flex;
      margin-top: 53px;
      margin-bottom: 53px;
      width: 700px;

      //   justify-content: right;

      img {
        width: 75px;
        height: 75px;
        margin-left: 19px;
        margin-top: 3px;
      }
      .hello-content {
        width: 450px;
        font-size: 26px;
        padding: 20px;
        background-color: white;
        border-radius: 15px;
        margin-left: 304px;
        text-align: right;
        .left {
          text-align: left;
        }
      }
    }
          .hellos {
        display: flex;
        // margin-top: 53px;
        margin-bottom: 53px;
        img {
          width: 75px;
          height: 75px;
          margin-right: 19px;
          margin-top: 3px;
        }
        .hello-content {
          width: 450px;
          font-size: 26px;
          padding: 20px;
          background-color: white;
          border-radius: 15px;
        }
      }
  }
  .zhan {
    position: relative;
    height: 94px;
    bottom: 0;
  }
  .footer {
    height: 94px;
    width: 100%;
    // background-color: red;
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    background-color: white;
    img {
      width: 41px;
      height: 41px;
    }
    .footer-one {
      margin-left: 23px;
      margin-right: 23px;
    }
    input {
      color: #c9c9c9;
      outline: none;
      border: 0;
      height: 40px;
      background-color: transparent;
      margin-right: 232px;
    }
    .footer-two {
      margin-right: 22px;
    }
  }
}
</style>